<template>
	<view class="querendingdan">
		<view class="shouhuofangshi" v-if="data.supportSince">
			<view v-for="(item,index) in shouhuoList" :key="index" :class="index===shouhuoListIndex?'active-shouhuofangshi-item' : 'shouhuofangshi-item'" @click="handleShouhuofangshi(index)">{{item}}</view>
		</view>
		<view class="zitixinxi"  v-if="shouhuoListIndex == 1">
			<image src="../../static/order_address@2x.png" mode=""></image>
		    <input class="zitixinxi-input" type="text" v-model="name" placeholder="输入自提人姓名" />
			<input class="zitixinxi-input1" type="number" v-model="phone" placeholder="输入手机号码" />
		</view>
		<view class="zitididian" v-if="shouhuoListIndex == 1">
			<image src="../../static/ztd@2x.png" mode=""></image>
			<view class="zitidian-box">
				<view class="zitidian-box-title">{{zitiData.name}}</view>
				<view class="zitidian-box-content">自提时间：{{zitiData.businessStartTime}}-{{zitiData.businessEndTime}}</view>
				<view class="zitidian-box-content">{{zitiData.address}}</view>
			</view>
		</view>
		<view class="add-addr" @click="handledizhi" v-if="addressInfo == '' && shouhuoListIndex == 0">
			<image src="../../static/order_address@2x.png" mode=""></image>
			<text>添加收货地址</text>
		</view>
		<view class="addr" @click="handledizhi" v-if="addressInfo && shouhuoListIndex == 0">
			<view class="addr-left">
				<view class="addr-left-name">
					<text>{{addressInfo.name}}</text>
					<text>{{addressInfo.mobile}}</text>
				</view>
				<view class="addr-left-address">
					<view class="moren" v-if="addressInfo.isDefault">
						默认
					</view>
					<view class="address-content">
						{{addressInfo.detailedAddress}}
					</view>
				</view>
			</view>
			<image class="addr-image" src="../../static/xiayibu@2x.png" mode=""></image>
		</view>
		
		<view class="list">
			<view class="item" v-for="(item,index) in data.goodsList" :key="index">
				<image :src="item.goodsImg" mode="aspectFill"></image>
				<view class="item-box">
					<view class="item-box-view">{{item.goodsName}}</view>
					<view class="item-box-view tag-title" v-if="data.orderType == 1">
						<text>拼团</text>
					</view>
					<view class="item-box-view1">{{item.specifications}}</view>
					<view class="item-box-view2">
						<text class="item-box-view2-text" v-if="data.orderType == 0">￥{{item.price}}</text>
						<view class="item-box-view2-text" v-if="data.orderType == 1">
							拼团价 ￥{{data.groupProduct.groupBuyPrice}} 
							<text class="price through" style="margin-left: 10rpx;">￥{{item.price}}</text>
						</view>						
						<text class="item-box-view2-text1">x{{item.number}}</text>
					</view>
				</view>
			</view>
			
			<view class="box">
				<view class="box-price" v-if="data.orderType == 0">
					<view class="box-price-left">小计</view>
					<view class="box-price-right">￥{{data?data.subtotal : 0}}</view>
				</view>
				<view class="box-price" v-if="data.orderType == 1 && isGroupBuy== 1">
					<view class="box-price-left">拼团价</view>
					<view class="box-price-right">￥{{data ? data.groupProduct.groupBuyPrice : 0}}</view>
				</view>
				<view class="box-price" v-if="data.orderType == 1" style="margin-top: 20rpx;">
					<view class="box-price-left">原价</view>
					<view class="box-price-right through" v-if="isGroupBuy== 1">￥{{data? data.subtotal : 0}}</view>
					<view class="box-price-right" v-if="isGroupBuy== 0">￥{{data? data.subtotal : 0}}</view>
				</view>
					
				<view class="box-yunfei">
					<view class="box-price-left">运费</view>
					<view class="box-price-right">￥{{data?data.cost : 0}}</view>
				</view>
				<view class="box-coupon" @click="handleyouhuiquan">
					<view class="box-coupon-left">优惠券</view>
					<view class="box-coupon-right">
						<text v-if="couponInfo==''">选择优惠券</text>
						<text v-else>-￥{{couponInfo.money}}</text>
						<image src="../../static/xiayibu@2x.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="zongji">
				<text>总计</text>
				<text>￥{{data?data.subtotal : 0}}</text>
			</view>
		</view>
		
		<view class="beizhu">
			<view class="beizhu-title">
				商品备注
			</view>
		    <textarea placeholder="请填写您需要备注的商品信息" v-model="remark" placeholder-color="#999999"></textarea>
		</view>
		<view class="kong">
			
		</view>
		<view class="box-bottom">
			<view class="box-bottom-left">总计：￥{{data?data.payMoney : 0}}</view>
			<view class="box-bottom-right" @click="$u.throttle(handlezhifu, 1500)">立即付款</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				remark:'',
				addressId:'',
				addressInfo:'',
				couponInfo:'',
				data:'',
				number:'',
				productId:'',
				specificationId:'',
				type:'',
				shouhuoList:['邮寄','自提'],
				shouhuoListIndex:0,
				groupBySettlementId:'',
				zitiData:'',
				name:'',
				phone:'',
				share:uni.getStorageSync('share'),
				groupId:0,
				orderType:0,
				isGroupBuy:0,
			}
		},
		onShow() {
		    // 移除全局自定义事件监听器
		    uni.$off('refreshAddress');
		    // 监听全局的自定义事件
		    uni.$once('refreshAddress', data => {
				this.addressId = data
		        this.getaddressDetail()
				this.getconfirmOrder()
		    })
			
			
			// 移除全局自定义事件监听器
			uni.$off('refreshYouhuiquan');
			// 监听全局的自定义事件
			uni.$once('refreshYouhuiquan', data => {
				this.couponInfo = data
				console.log(this.couponInfo)
				this.getconfirmOrder()
			})
			
		},
		onLoad(options) {
			this.type = JSON.parse(options.type)
			if (options.number) {
				this.number = options.number
				//this.productId = options.productId
				this.specificationId = options.specificationId
			}
			
			if(options.groupId){
				this.groupId = parseInt(options.groupId);
			}
			if(options.orderType){
				this.orderType = parseInt(options.orderType);
			}
			if(options.isGroupBuy){
				this.isGroupBuy = parseInt(options.isGroupBuy);
			}
			
			if (options.groupBySettlementId) {
				this.groupBySettlementId = options.groupBySettlementId
			}
			this.getaddress()
			this.getzitixinxi()
			
		},
		methods: {
			//选择收货方式
			handleShouhuofangshi(index){
				this.shouhuoListIndex = index
				this.getconfirmOrder()
			},
			//自提信息
			async getzitixinxi(){
				const res = await this.$u.api.getSinceSiteInfo()
				this.zitiData = res.data
			},
			
			//第一次获取默认地址
			async getaddress(){
				const params = {
					queryType:1
				}
				const res = await this.$u.api.address(params)
				if (res.data.length > 0) {
					this.addressInfo = res.data[0]
				}
				this.getconfirmOrder()
			},
			//订单详情
			async getconfirmOrder(){
				const params = {
					cartBuy:this.type===1?true : false,
					addressId:this.addressInfo.id,
					couponsId:this.couponInfo.couponsId,
					remark:'',
					number:this.number,
					// productId:this.productId
					specificationId:this.specificationId,
					groupBySettlementId:this.groupBySettlementId,
					freightType:this.shouhuoListIndex,
					consignee:this.name,
					mobile:this.phone,
					groupId:this.groupId,
					orderType:this.orderType,
					isGroupBuy: this.isGroupBuy
				}
				const res = await this.$u.api.confirmOrder(params)
				this.data = res.data
			},
			//收货地址详情
			async getaddressDetail(){
				const params = {
					id:this.addressId
				}
				const res = await this.$u.api.addressDetail(params)
				this.addressInfo = res.data
				this.addressInfo.detailedAddress = res.data.provinceName +  res.data.cityName +  res.data.areaName +  res.data.address
				console.log(this.addressInfo)
			},
			//收货地址
			handledizhi(){
				const params = 'type= '+ 0
				uni.navigateTo({
					url:'/pages/shouhuodizhi/shouhuodizhi?'+params
				})
			},
			//选择优惠券
			handleyouhuiquan(){
				const param = 'couponList=' + JSON.stringify(this.data.couponsList)
				uni.navigateTo({
					url:'/pages/xuanzeyouhuiquan/xuanzeyouhuiquan?' + param
				})
			},
			//支付
			async handlezhifu(){
				const params = {
					cartBuy:this.type===1?true : false,
					addressId:this.addressInfo.id,
					couponsId:this.couponInfo.couponsId,
					remark:this.remark,
					number:this.number,
					// productId:this.productId
					specificationId:this.specificationId,
					groupBySettlementId:this.groupBySettlementId,
					freightType:this.shouhuoListIndex,
					consignee:this.name,
					mobile:this.phone,
					orderType:this.orderType,
					groupId:this.groupId,
					isGroupBuy: this.isGroupBuy
				}
				const res1 = await this.$u.api.submitOrder(params)
				console.log(res1)
				// const param = 'orderId=' + res1.data.orderId + '&type=' + 1
				const param = 'orderId=' + res1.data.orderId + '&type=1&orderType=' + this.orderType + '&groupId=' + this.groupId + '&isGroupBuy=' + this.isGroupBuy;	
				if (res1.data.freeOrder == false) {
					uni.requestPayment({
						provider: 'wxpay',    //支付类型-固定值
						timeStamp: res1.data.wxPayInfo.timeStamp, // 时间戳（单位：秒）
						nonceStr: res1.data.wxPayInfo.nonceStr, // 随机字符串
						package: res1.data.wxPayInfo.packageValue, // 固定值
						signType: res1.data.wxPayInfo.signType, //固定值
						paySign: res1.data.wxPayInfo.paySign, //签名
						appId:res1.data.wxPayInfo.appId,
						success: (res)=> {
							console.log('我支付成功了')
							uni.showToast({
								icon: 'success',
								title: '支付成功'
							})
							uni.requestSubscribeMessage({
								tmplIds: ['hFFHbw5eYfjco3Zzlq0ube3IELTOl5MM6txLqQJ3ll8'],
								complete: (res) => {
									console.log(res,'999');
								
								}
							})
							setTimeout(()=>{
								uni.navigateTo({
									url:'/pages/dingdanxiangqing/dingdanxiangqing?' + param
								})
							},1000)
						},
						
						fail: (err)=> {
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							})
							setTimeout(()=>{
								uni.navigateTo({
									url:'/pages/dingdanxiangqing/dingdanxiangqing?' + param
								})
							},1000)
						}
					});	
				}else{
					uni.navigateTo({
						url:'/pages/dingdanxiangqing/dingdanxiangqing?' + param
					})
					uni.requestSubscribeMessage({
						tmplIds: ['hFFHbw5eYfjco3Zzlq0ube3IELTOl5MM6txLqQJ3ll8'],
						complete: (res) => {
							console.log(res,'999');
						
						}
					})
				}
				// uni.navigateTo({
				// 	url:'/pages/dingdanxiangqing/dingdanxiangqing'
				// })
			}
		}
	}
</script>

<style>
	page{
		background: #FBFBFB;
	}
</style>
<style scoped lang="scss">
	.shouhuofangshi{
		display: flex;
		flex-direction: row;
		padding: 16rpx 28rpx;
		margin-bottom: 28rpx;
	}
	.shouhuofangshi-item{
		width: 224rpx;
		height: 76rpx;
		background: rgba(93, 34, 186, 0.1);
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #5D22BA;
		line-height: 76rpx;
		text-align: center;
		margin-right: 24rpx;
	}
	.active-shouhuofangshi-item{
		width: 224rpx;
		height: 76rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 76rpx;
		text-align: center;
		margin-right: 24rpx;
	}
	.zitixinxi{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 28rpx;
		margin-bottom: 28rpx;
		background: white;
	}
	.zitixinxi image{
		width: 40rpx;
		height: 40rpx;
	}
	.zitixinxi input{
		margin-left: 32rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 38rpx;
	}
	.zitididian{
		padding: 28rpx;
		background: white;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.zitididian image{
		width: 40rpx;
		height: 40rpx;
	}
	.zitidian-box{
		display: flex;
		flex-direction: column;
		margin-left: 32rpx;
	}
	.zitidian-box-title{
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 38rpx;
	}
	.zitidian-box-content{
		margin-top: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 32rpx;
	}
    .add-addr{
		padding: 48rpx 28rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: white;
	}
	.add-addr image{
		width: 40rpx;
		height: 40rpx;
	}
	.add-addr text{
		margin-left: 16rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 32rpx;
	}
	.list{
		margin-top: 28rpx;
		padding: 28rpx;
		background: white;
	}
	.item{
		padding-bottom: 28rpx;
		display: flex;
		flex-direction: row;
	}
	.item image{
		width: 204rpx;
		height: 204rpx;
	}
	.item-box{
		flex: 1;
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.item-box-view{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 32rpx;
	}
	.item-box-view1{
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 28rpx;
	}
	.item-box-view2{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.item-box-view2-text{
		font-size: 32rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #5D22BA;
		line-height: 38rpx;
	}
	.item-box-view2-text1{
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 38rpx;
	}
	.box{
		padding: 28rpx 0rpx;
        border-top: 0.5px solid #E3E3E3;
		border-bottom: 0.5px solid #E3E3E3;
	}
	.box-price{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.box-price-left{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.box-price-right{
		font-size: 32rpx;
		font-family: Arvo-Regular, Arvo;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.box-yunfei{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-top: 28rpx;
	}
	.box-coupon{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 28rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.box-coupon-right{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 32rpx;
	}
	.box-coupon-right image{
		margin-left: 8rpx;
		width: 36rpx;
		height: 36rpx;
	}
	.zongji{
		padding-top: 28rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 34rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 36rpx;
	}
	.beizhu{
		margin-top: 28rpx;
		padding: 28rpx;
		background: white;
	}
	.kong{
		width: 100%;
		height: 200rpx;
	}
	.beizhu-title{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 32rpx;
		padding-bottom: 28rpx;
	}
	.beizhu textarea{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
		width: 100%;
	}
	.box-bottom{
        border-top: 0.5px solid #F3F3F3;
		width: 750rpx;
		height: 168rpx;
		background: #FFFFFF;
		padding: 10rpx 28rpx 0rpx 28rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		z-index: 1000;
	}
	.box-bottom-left{
		font-size: 36rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 38rpx;
	}
	.box-bottom-right{
		width: 256rpx;
		height: 92rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 92rpx;
		text-align: center;
	}
	.addr{
		padding: 48rpx 28rpx;
		background: white;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.addr-left{
		
	}
	.addr-left-name{
		display: flex;
		flex-direction: row;
		font-size: 32rpx;
		font-family: SF Pro Text-Bold, SF Pro Text;
		font-weight: bold;
		color: #333333;
		line-height: 38rpx;
	}
	.addr-left-name text{
		margin-left: 8rpx;
	}
	.addr-left-address{
		margin-top: 22rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.moren{
		width: 60rpx;
		height: 32rpx;
		background: url('http://hmh-app.oss-cn-beijing.aliyuncs.com/webStorage/web_16919793742137642.png') no-repeat;
		background-size: 100% 100%;
		border-radius: 2px 2px 2px 2px;
		font-size: 22rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 32rpx;
		text-align: center;
		margin-right: 16rpx;
	}
	.address-content{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 32rpx;
	}
	.addr-image{
		width: 48rpx;
		height: 48rpx;
	}
	.tag-title{
		border: 1rpx solid #5D22BA;
		border-radius: 30rpx;
		width: 100rpx !important;
		text-align: center;
		margin: 10rpx;
	}
	.through { 
		text-decoration: line-through;
		color: gray; 
	}
</style>
